<template>
    <div>
        <div class="outmain ba_f heighthv pad_20 bor_rad5">
            <div class="shuju_title mar_b20">
                <div class="shuju_title_text">
                    <span>活动基本信息</span>
                </div>
            </div>
            <div class="mar_t20 flex-bet flex-y-top">
                <div class="flex-g-1">
                    <el-form ref="form" :model="form" label-width="180px">
                        <el-form-item label="活动名称">
                            <el-input v-model="form.name" placeholder="请输入活动名称"></el-input>
                        </el-form-item>
                        <el-form-item label="活动时间">
                            <el-date-picker v-model="timeData" type="datetimerange" align="right"
                                            start-placeholder="开始日期" end-placeholder="结束日期"
                                            :default-time="['08:00:00', '20:00:00']"></el-date-picker>
                        </el-form-item>
                        <el-form-item label="邀请成功规则">
                            <el-radio-group v-model="form.type">
                                <el-radio label="1">无门槛</el-radio>
                                <el-radio label="2">新用户下单次数</el-radio>
                                <el-radio label="3">新用户消费金额</el-radio>
                            </el-radio-group>
                            <div class="mar_t10 time_item" v-show="form.type == '2'">
                                <span style="margin-right: 10px;">满</span>
                                <el-input-number v-model="form.num" controls-position="right" :min="0" :max="100000000"
                                                 placeholder="多少单"></el-input-number>
                                <span class="mar_lr10">单</span>
                            </div>
                            <div class="mar_t10 time_item" v-show="form.type == '3'">
                                <span style="margin-right: 10px;">满</span>
                                <el-input-number v-model="form.money" controls-position="right" :min="0"
                                                 :max="100000000" placeholder="多少元"></el-input-number>
                                <span class="mar_lr10">元</span>
                            </div>
                        </el-form-item>
                        <el-form-item label="分享标题">
                            <el-input v-model="form.shareTitle" placeholder="请输入分享标题"></el-input>
                        </el-form-item>
                        <el-form-item label="分享图片">
                            <div class="uploadSource bor_de rel flex curs" v-if="form.shareIcon">
                                <label class="statusLabel curs" @mouseenter="enter(1)" @mouseleave="leave(1)">
                                    <i class="el-icon-check" ref="imgicon1"></i>
                                    <i class="el-icon-close" @click="deleteMultiImage(form.shareIcon,1)"></i>
                                </label>
                                <img :src="form.shareIcon" @click="test(1)" class="wid"/>
                            </div>
                            <div class="uploadSource flex-center curs" v-else @click="test(1)">
                                <i class="el-icon-plus fon_40 color_d9"></i>
                            </div>
                        </el-form-item>
                        <el-form-item label="活动规则">
                            <baidu-ueditor style="width: 800px;" :content="form.shareRule"
                                           @ueditor="getUeditor"></baidu-ueditor>
                        </el-form-item>
                    </el-form>
                </div>
                <div class="flex-g-0 pad_lr_20">
                    <div class="fon_16">常见问题</div>
                    <el-collapse v-model="collapseName" accordion class="mar_tb10" style="width: 260px">
                        <el-collapse-item title="什么是老带新？" name="1">
                            <div>老带新是通过老用户去邀请新用户的一种引流活动。</div>
                        </el-collapse-item>
                        <el-collapse-item title="为什么要添加老带新活动？" name="2">
                            <div>老带新活动可引流拉新，转化新用户。</div>
                        </el-collapse-item>
                    </el-collapse>
                    <div class="fon_16 mar_t20">活动规则</div>
                    <div class="color_9 mar_t10 lh30 fon_13">
                        <div>1.活动仅限在线支付订单；</div>
                        <div>2.活动成本由商家承担，与店铺其他活动默认同享</div>
                    </div>
                </div>
            </div>
            <div class="shuju_title mar_b20">
                <div class="shuju_title_text">
                    <span>邀请人奖励</span>
                </div>
            </div>
            <el-form ref="form" :model="form" label-width="180px">
                <el-form-item label="奖励方式">
                    <el-radio>奖励阶梯</el-radio>
                </el-form-item>
                <el-form-item label="奖励方式">
                    <div class="time_item mar_b10" v-for="(item,index) in rewardArr" :key="index">
                        <span class="mar_lr10">邀请满</span>
                        <el-input-number v-model="item.people" controls-position="right" :min="0" :max="100000000"
                                         placeholder="邀请人数"></el-input-number>
                        <span class="mar_lr10">人</span>
                        <span class="mar_lr10">赠送金额</span>
                        <el-input-number v-model="item.money" controls-position="right" :min="0" :max="100000000"
                                         placeholder="金额"></el-input-number>
                        <span class="mar_lr10">元</span>
                        <span class="mar_l20 mar_r10">赠送</span>
                        <el-input-number v-model="item.integral" controls-position="right" :min="0" :max="100000000"
                                         placeholder="积分"></el-input-number>
                        <span class="mar_lr10">积分</span>
                        <el-button type="danger" size="small" @click="delData(item)">删除</el-button>
                    </div>
                    <el-button v-show="rewardArr.length<10" type="text" @click="addfullArr">
                        <Icon type="md-add"/>
                        新增规则
                    </el-button>
                </el-form-item>
            </el-form>
            <div class="shuju_title mar_b20">
                <div class="shuju_title_text">
                    <span>新用户奖励</span>
                </div>
            </div>
            <el-form ref="form" :model="form" label-width="180px">
                <el-form-item label="新人礼包">
                    <div class="">
                        <div class="mar_lr10">
                            <el-checkbox-group v-model="form.isCoupon">
                                <el-checkbox true-label="1" false-label="2">赠送优惠券</el-checkbox>
                            </el-checkbox-group>
                        </div>
                        <div v-show="form.isCoupon=='1'" class="flex">
                            <el-select v-model="form.couponId" multiple filterable placeholder="请选择优惠券">
                                <el-option v-for="item in comgrouping" :key="item.id" :label="item.name"
                                           :value="item.id"></el-option>
                            </el-select>
                        </div>
                    </div>
                    <div class="t_l numberInput">
                        <div class="mar_lr10">
                            <el-checkbox-group v-model="form.isBalance">
                                <el-checkbox true-label="1" false-label="2">赠送余额</el-checkbox>
                            </el-checkbox-group>
                        </div>
                        <div v-show="form.isBalance=='1'">
                            <el-input-number v-model="form.balance" controls-position="right" :min="0.01"
                                             :max="99999999" class></el-input-number>
                            <span class="mar_l10">元</span>
                        </div>
                    </div>
                    <div class="mar_t10 t_l numberInput">
                        <div class="mar_lr10">
                            <el-checkbox-group v-model="form.isIntegral">
                                <el-checkbox true-label="1" false-label="2">赠送积分</el-checkbox>
                            </el-checkbox-group>
                        </div>
                        <div v-show="form.isIntegral=='1'">
                            <el-input-number v-model="form.integral" controls-position="right" :min="1" :max="99999999"
                                             class></el-input-number>
                            <span class="mar_l10">积分</span>
                        </div>
                    </div>
                </el-form-item>
            </el-form>
        </div>
        <div class="mar_t20 ba_f pad_20 t_c">
            <el-button type="primary" @click="submitForm">立即创建</el-button>
        </div>
        <attachment-img ref="img1" type="img" @attachment="imgadd1"></attachment-img>
    </div>
</template>
<script>
    import baiduUeditor from '@/plugins/baidu-ueditor';
    import attachmentImg from '@/plugins/attachment-img';
    import {postSaveActivity, getSaveActivity} from '@/api/plug';
    import {getSelectCoupon} from "@/api/user";
    import {changeDate} from '@/utils/index';

    export default {
        components: {attachmentImg, baiduUeditor},
        created() {
            if (this.$route.query.id) {
                this.id = this.$route.query.id
                this.edit()
            }
            this.getSelectCoupon()
        },
        data() {
            return {
                rewardArr: [],
                form: {
                    name: '',
                    type: '1',
                    num: '',
                    money: '',
                    shareTitle: '',
                    shareIcon: '',
                    shareRule: '',
                    couponId: [],
                    isBalance: '',
                    isCoupon: '',
                    balance: '',
                    isIntegral: '',
                    integral: '',
                },
                timeData: [new Date(), new Date().setMonth(new Date().getMonth() + 3)],
                comgrouping: [],
                collapseName: ''
            };
        },
        methods: {
            async getSelectCoupon() {
                const {data} = await getSelectCoupon()
                this.comgrouping = data ? data : []
            },
            enter(i = 0) {
                this.$refs['imgicon' + i].style.display = 'none';
            },
            leave(i = 0) {
                this.$refs['imgicon' + i].style.display = 'inline-block';
            },
            test(i = 0) {
                // console.log(this.$refs, i)
                this.$refs['img' + i].dialogVisible = true;
            },
            deleteMultiImage(item, index, type) {
                Array.prototype.remove = function (val) {
                    var index = this.indexOf(val);
                    if (index > -1) {
                        this.splice(index, 1);
                    }
                };
                if (type == 'multigraph') {
                    switch (index) {
                        case 5:
                            break;
                    }
                } else {
                    switch (index) {
                        case 1:
                            this.form.shareIcon = '';
                            break;
                    }
                }
            },
            imgadd1(url) {
                this.form.shareIcon = url.str;
            },
            delData(msg) {
                this.rewardArr.splice(msg, 1);
            },
            addfullArr() {
                let fullObj = {people: 1, money: 1, integral: 1};
                this.$set(this.rewardArr, this.rewardArr.length, fullObj);
            },
            delfullArr(index) {
                this.$delete(this.rewardArr, index);
            },
            async edit() {
                const {data} = await getSaveActivity({id: this.id});
                this.form2 = this.form;
                this.form = Object.assign(this.form2, data);
                if (data.startTime) {
                    this.timeData = [data.startTime, data.endTime];
                }
                if (data.rewardArr) {
                    this.rewardArr = data.rewardArr.map((v) => ({people: v.people, money: v.money, integral: v.integral}));
                }
            },
            async submitForm() {
                this.$refs['form'].validate(async (valid) => {
                    if (valid) {
                        if (this.timeData) {
                            this.form.startTime = changeDate(this.timeData[0]);
                            this.form.endTime = changeDate(this.timeData[1]);
                        }
                        this.form.rewardArr = this.rewardArr;
                        const {msg} = await postSaveActivity(this.form);
                        this.$baseMessage(msg, 'success');
                        this.$router.go(-1);
                    } else {
                        return false;
                    }
                });
            },
            getUeditor(content) {
                this.form.shareRule = content;
            },
        }
    };
</script>
<style lang="scss">
    .time_item .el-input {
        width: 180px;
    }
</style>
